<template>
	<view class="wrap relative">
		<uni-nav-bar left-icon="back" @clickLeft="$tab.back()" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" color="#FFF"></uni-nav-bar>

		<div class="" v-if="detail">
			<image :src="globalConfig.imagePrefix + detail.icon" class="w-full" mode="widthFix"></image>
			<div class="p-32 ">
				<div class="text-36 font-700">
					{{detail.name}}
				</div>

				<div class="mt-48 flex items-center">
					<div class="shu" style="color: #E0322B;">
					</div>
					<div class="ml-12">
						详情
					</div>
				</div>

				<div class="mt-32">
					<mp-html :content="detail.detail"></mp-html>
				</div>
			</div>
		</div>

		<!-- 	<div class="confirm text-center text-FFF" @click="handleShow">
			立即申请
		</div> -->

		<bottom-btn txt="提交预约" @click="handleShow"></bottom-btn>

		<div class="" style="height: 150rpx;"></div>

		<u-popup :show="show" @close="show = false" round="20">
			<div class="py-32">
				<div class="flex justify-around relative">
					<div class="">
						加盟申请
					</div>
					<div class="close" @click="show = false">
						<u-icon name="close" color="#000" size="20"></u-icon>
					</div>
				</div>

				<div class="mt-48 flex flex-col items-center">
					<input type="text" placeholder="请输入姓名" class="input" v-model="form.realName" />

					<input type="tel" placeholder="请输入联系电话" class="input mt-32" v-model="form.phone" />
				</div>

				<div class="px-32">
					<div class="mt-48 submit" @click="submit">
						提交预约
					</div>
				</div>
			</div>
		</u-popup>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				show: false,
				form: {
					realName: "",
					phone: ""
				},
				id: "",
				detail: null,
				globalConfig: getApp().globalData.config
			};
		},
		onLoad(e) {
			thro = this
			this.id = e.id
			this.getData(e.id)
		},
		methods: {
			async getData(id) {
				const res = await this.$Api.index.getRecruitDetail({
					id
				})
				this.detail = res.data
			},
			handleShow() {
				this.form = {
					realName: "",
					phone: "",
					brandId: this.id
				}
				this.show = true
			},
			submit: throttle(2000, async () => {
				if (!thro.form.realName) {
					thro.$modal.msg("请输入姓名")
					return
				}
				if (!thro.form.phone) {
					thro.$modal.msg("请输入联系电话")
					return
				}
				if (!/^1[3456789]\d{9}$/.test(thro.form.phone)) {
					thro.$modal.msg("请输入正确的手机号")
					return
				}
				const res = await thro.$Api.index.join(thro.form)
				thro.$modal.msg("提交成功")
				thro.$tab.back(1500)
			},{
				noTrailing:true
			})
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	/deep/ .uni-navbar {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}

	.shu {
		width: 4rpx;
		height: 20rpx;
		background: #E0322B;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.confirm {
		width: 288rpx;
		height: 80rpx;
		border: 2rpx solid #FFFFFF;
		line-height: 80rpx;
		position: absolute;
		left: 50%;
		bottom: 130rpx;
		transform: translateX(-50%);
	}

	.close {
		position: absolute;
		right: 32rpx;
		top: 0;
	}

	.input {
		width: 686rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #A7A7A7;
		line-height: 80rpx;
		text-align: center;
	}

	.submit {
		height: 88rpx;
		background: #1A1A1A;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
	}
</style>